/*
 * @Author: songjian
 * @Date: 2018-11-07 16:55:31
 * @Last Modified by: songjian
 * @Last Modified time: 2018-11-08 17:03:44
 */

import React from 'react';
import { Rate, Menu, Dropdown, Icon, Table, Divider, Button, Modal, Input } from 'antd';

import styles from './index.module.less';
import TextArea from 'antd/lib/input/TextArea';

export default class Estimate extends React.Component {
  state = {
    value: 4.5,
    visible: false,
  }

  handleChange = value => {
    this.setState({ value });
  }

  removeReply = () => {
    Modal.confirm({
      title: '删除回复',
      content: '确定删除回复？',
      okText: '确定',
      cancelText: '取消',
      centered: true,
    });
  }

  showReply = () => {
    this.setState({
      visible: true,
    });
  }

  hideReply = () => {
    this.setState({
      visible: false,
    });
  }

  render() {
    const { value } = this.state;

    /* 顶部下拉框数据设置 */
    const menu = (
      <Menu>
        <Menu.Item>
          <a target='_blank' rel='noopener noreferrer' href='http://www.alipay.com/'>alipay</a>
        </Menu.Item>
      </Menu>
    );

    /* const renderContent = (value, record, index) => {
      const obj = {
        children: value,
        props: {},
      };
      if (index === 3) {
        obj.props.colSpan = 0;
      }
      return obj;
    }; */

    /* table表格列属性设置 */
    const columns = [
      {
        title: '评价',
        align: 'center',
        dataIndex: 'estimate',
        // key: 'estimate',
      },
      {
        title: '商品名称',
        align: 'center',
        dataIndex: 'productname',
        // key: 'productname',
        render: (value, row, index) => {
          const obj = {
            children: value,
            props: {},
          };
          if (index === 3) {
            obj.props.colSpan = 4;
          }
          return obj;
        },
      },
      {
        title: '订单信息',
        align: 'center',
        dataIndex: 'orderinformation',
        // key: 'orderinformation',
        // render: renderContent,
      },
      {
        title: '评论时间',
        align: 'center',
        dataIndex: 'addtime',
        // key: 'addtime',
        // render: renderContent,
      },
      {
        title: '回复状态',
        align: 'center',
        dataIndex: 'replystate',
        // key: 'replystate',
        render: (value, record, index) => {
          const obj = {
            children: value,
            props: {},
          };
          if (index < 3) {
            obj.children =
            <span>
              {
                value === '未回复' ?
                  (
                    <React.Fragment>
                      <React.Fragment>{value}</React.Fragment><br />
                      <a className={styles.reply_btn} onClick={this.showReply}>回复</a>
                      <Modal
                        title="回复评价"
                        visible={this.state.visible}
                        onOk={this.hideReply}
                        onCancel={this.hideReply}
                        okText="提交"
                        cancelText="取消"
                        centered
                      >
                        <TextArea rows={6} placeholder='请输入回复内容' />
                      </Modal>
                    </React.Fragment>
                  ) :
                  (<React.Fragment>{ value }</React.Fragment>)
              }
            </span>;
          }
          if (index === 3) {
            obj.props.colSpan = 0;
          }
          return obj;
        },
      },
    ];

    /* table表格数据源 */
    const data = [
      {
        key: '1',
        estimate: '【五星】很不错的商品，服务态度也很好',
        productname: '三级螺纹钢',
        orderinformation: '订单号：1234567890 评价号：0987654321',
        addtime: '2018-08-08 13:12:12',
        replystate: '已回复',
        reply: '回复：谢谢您对我们的信任，我们会继续努力的',
      },
      {
        key: '2',
        estimate: '【五星】很不错的商品，服务态度也很好',
        productname: '三级螺纹钢',
        orderinformation: '订单号：1234567890 评价号：0987654321',
        addtime: '2018-08-08 13:12:12',
        replystate: '未回复',
        reply: '回复：谢谢您对我们的信任，我们会继续努力的',
      },
    ];

    /* table表格回复内容设置(展开行) */
    const expandedRow = record => {
      return (
        <div>
          {record.reply}
          <Button className={styles.expanded_row} onClick={this.removeReply}>删除回复</Button>
        </div>
      );
    };

    /* 分页设置 */
    const pagination = {
      showQuickJumper: true,
      onChange: pageNumber => {
        console.log('Page: ', pageNumber);
      },
    };

    return (
      <div className={styles.box}>
        <div className={styles.content}>
          <div className={styles.top_box}>

            <Dropdown overlay={menu}>
              <a className='ant-dropdown-link' href='#'>
                总体满意度 <Icon type='down' />
              </a>
            </Dropdown>
            <span style={{ position: 'relative' }}>
              {value && <span className='ant-rate-text'>{value}</span>}
              <Rate allowHalf allowClear={false} onChange={this.handleChange} value={value} />
            </span>

            <span style={{ marginLeft: 39, marginRight: 10 }}>选择星级</span>
            <Dropdown overlay={menu}>
              <a className='ant-dropdown-link' href='#'>
                全部 <Icon type='down' />
              </a>
            </Dropdown>

            <span style={{ marginLeft: 39, marginRight: 10 }}>回复状态</span>
            <Dropdown overlay={menu}>
              <a className='ant-dropdown-link' href='#'>
                全部 <Icon type='down' />
              </a>
            </Dropdown>

            <span style={{ marginLeft: 39, marginRight: 10 }}>评价内容</span>
            <Dropdown overlay={menu}>
              <a className='ant-dropdown-link' href='#'>
                全部 <Icon type='down' />
              </a>
            </Dropdown>
          </div>

          <div className={styles.bottom_box}>
            <Table
              bordered
              columns={columns}
              dataSource={data}
              expandedRowRender={expandedRow}
              defaultExpandAllRows={true}
              pagination={pagination}
            />
          </div>
        </div>
      </div>
    );
  }
}
